.progress-container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .checkdetailbox {
    position: relative;
    width: 99%;
    height: 270rpx;
    border-radius: 40rpx;
    margin: 100rpx auto 0;
    color: #636363;
    font-size: 26rpx;
    letter-spacing: 4rpx;
    .container1 {
      width: 97%;
      height: 270rpx;
      position: relative;
      top: 0;
      left: 0;
      background-color: #ffffff;
      border-radius: 18rpx;
      box-shadow: 2rpx 8rpx 16rpx rgba(253, 162, 167, 0.26);
      z-index: 1;
      .padding {
        position: relative;
        padding: 30rpx;
        .detailButton {
          position: absolute;
          top: 60rpx;
          right: 40rpx;
          width: 240rpx;
          border-radius: 16rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #ffffff;
          font-size: 32rpx;
          padding: 12rpx 0;
        }
        .active {
          background-color:#F77078;
        }
        .inactive {
          background-color: #B0B0B0;
          pointer-events: none;
        }
        .checkdetailbox-middle {
          margin: 20rpx 0;
        }
      }

    }
    .container2 {
      width: 97%;
      height: 270rpx;
      position: absolute;
      top: 20rpx;
      left: 20rpx;
      background-color: #ffffff;
      border-radius: 18rpx;
      box-shadow: 2rpx 8rpx 16rpx rgba(253, 162, 167, 0.26);
    }
  }
  .progress0 {
    width: 950rpx;
    transform: translate(-100rpx);
  }
  .progress1 {
    width: 930rpx;
    transform: translate(-120rpx);
  }
  .progress2 {
    width: 940rpx;
    transform: translate(-140rpx);
  }
  .progress3 {
    width: 900rpx;
    transform: translate(-150rpx);
  }
  .progress4 {
    width: 870rpx;
    transform: translate(-150rpx);
  }
}